<template>
	<div class="bqcy yuwenPinyiWriteWords">
		<div class="words-item" v-for="(item, index) in props.data" :key="index">
			<template v-for="(w, i) in item.word" :key="i">
				<Words :text="resulWords(w, item, index, i)" :disabled="!props.isStart" :size="size" :ping-yi="[item.pinyi[i]]" :show-arrow="false" :words-style="!isSpace(item.space, i)? {opacity: 0.6} : ''" :showInput="isSpace(item.space, i) && props.showInput" blank :focus-index="useState.currentInputId" :blank-length="1" :index="index" :line-grid="false" :words-index="i" ></Words>
			</template>	
		</div>
	</div> 
</template>

<script setup>
import { onMounted, ref } from "vue"
import Words from "@/components/words/index.vue"
import { useTopic } from "../hook.js"
import Pinyi from "@/components/words/pingyi.vue"
import Props from "../props.js"
const props = defineProps({
	...Props,
	size: {
		type: Number,
		default: 10
	}
})
const emit = defineEmits(['answer'])
const { useState, useSaveInputId, useGetNextId, useSaveResult } = useTopic({props})
const value = {}
const changeInput = (params) => {
	if(!value[params.index]) { value[params.index] = {} }
	value[params.index][params.wordsIndex] = params.words
	emit('answer', value)
}
const confirm = (data) => {
	useGetNextId(`${data.index}${data.wordsIndex}`)
}
const isDraw = ref(false)
const toogleDraw = () => isDraw.value = !isDraw.value
// 是否是填空位置
const isSpace = (spaceIndex, i) => spaceIndex.includes(i)
const resulWords = (w, item, index, i) => {
	const space = isSpace(item.space, i)
	return !space ? w : props.result?.[index]?.[i] || ['']
}
defineExpose({ toogleDraw })
</script>

<style lang="scss" scoped>
.yuwenPinyiWriteWords {
	.words-item {
		margin-bottom: 2rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.course-words-list .course-words-box image {
		opacity: 0;
	}
}
</style>
<style lang="scss">
.bqcy {
	.course-words-pinyi {
		position: relative;
		top: -0.8rem;
	}
}
</style>